/**
 * Created by Administrator on 2017/10/20.
 */
import React from 'react';

import css from './index.less';
import Data from 'data';
import { Link } from 'react-router-dom';
import {observer, inject, action} from 'mobx-react';
import { Icon, message } from 'antd';

import TopBar from 'components/topBar';

// import Img from 'assets/imgLoad';

// import day1 from 'assets/img/day_01.jpg';
// import day2 from 'assets/img/day_02.jpg';
// import day3 from 'assets/img/day_03.jpg';
// import day4 from 'assets/img/day_04.jpg';
// import day5 from 'assets/img/day_05.jpg';
// import day6 from 'assets/img/day_06.jpg';
// import day7 from 'assets/img/day_07.jpg';
// import day8 from 'assets/img/day_08.jpg';
// 小图片
// const day1 = 'https://img.alicdn.com/imgextra/i1/3355153118/TB2UR9SX3DD8KJjy0FdXXcjvXXa-3355153118.jpg';
// const day2 = 'https://img.alicdn.com/imgextra/i1/3355153118/TB2qCkDXBbM8KJjSZFFXXaynpXa-3355153118.jpg';
// const day3 = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2FSkDXBbM8KJjSZFFXXaynpXa-3355153118.jpg';
// const day4 = 'https://img.alicdn.com/imgextra/i1/3355153118/TB2SIOHXZrI8KJjy0FhXXbfnpXa-3355153118.jpg';
// const day5 = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2YFCKX3vD8KJjSsplXXaIEFXa-3355153118.jpg';
// const day6 = 'https://img.alicdn.com/imgextra/i1/3355153118/TB2OYMyXBfM8KJjSZFOXXXr5XXa-3355153118.jpg';
// const day7 = 'https://img.alicdn.com/imgextra/i1/3355153118/TB2awwAXuLM8KJjSZFqXXa7.FXa-3355153118.jpg';
// const day8 = 'https://img.alicdn.com/imgextra/i2/3355153118/TB2F3QDXqLN8KJjSZFmXXcQ6XXa-3355153118.jpg';

const day1 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2QP9madbJ8KJjy1zjXXaqapXa-3355153118.jpg';
const day2 = 'https://img.alicdn.com/imgextra/i2/3355153118/TB2vd9tafDH8KJjy1XcXXcpdXXa-3355153118.jpg';
const day3 = 'https://img.alicdn.com/imgextra/i1/3355153118/TB2PtWmannI8KJjy0FfXXcdoVXa-3355153118.jpg';
const day4 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2gL1zXJHO8KJjSZFHXXbWJFXa-3355153118.jpg';
const day5 = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2QyGmacbI8KJjy1zdXXbe1VXa-3355153118.jpg';
const day6 = 'https://img.alicdn.com/imgextra/i2/3355153118/TB2o8unacjI8KJjSsppXXXbyVXa-3355153118.jpg';
const day7 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2_J9jadnJ8KJjSszdXXaxuFXa-3355153118.jpg';
const day8 = 'https://img.alicdn.com/imgextra/i2/3355153118/TB2JZWmaf6H8KJjy0FjXXaXepXa-3355153118.jpg';
// 小图
// const night1 = 'https://img.alicdn.com/imgextra/i2/3355153118/TB22YsCXazB9uJjSZFMXXXq4XXa-3355153118.jpg';
// const night2 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2nsWTX0fJ8KJjy0FeXXXKEXXa-3355153118.jpg';
// const night3 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2r_cFXtLO8KJjSZPcXXaV0FXa-3355153118.jpg';
// const night4 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2oVy1X3vD8KJjSsplXXaIEFXa-3355153118.jpg';
// const night5 = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2HkiZXZjI8KJjSsppXXXbyVXa-3355153118.jpg';
// const night6 = 'https://img.alicdn.com/imgextra/i2/3355153118/TB2_IGYXZrI8KJjy0FhXXbfnpXa-3355153118.jpg';
// const night7 = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2NeqWX_nI8KJjSszgXXc8ApXa-3355153118.jpg';
// const night8 = 'https://img.alicdn.com/imgextra/i1/3355153118/TB2S2IIXtHO8KJjSZFHXXbWJFXa-3355153118.jpg';
// const night9 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB26BEMXqLN8KJjSZFmXXcQ6XXa-3355153118.jpg';
// import night2 from 'assets/img/nightBg/1_02.jpg';
// import night3 from 'assets/img/nightBg/1_03.jpg';
// import night4 from 'assets/img/nightBg/1_04.jpg';
// import night5 from 'assets/img/nightBg/1_05.jpg';
// import night6 from 'assets/img/nightBg/2_01.jpg';
// import night7 from 'assets/img/nightBg/2_02.jpg';
// import night8 from 'assets/img/nightBg/2_03.jpg';
// import night9 from 'assets/img/nightBg/2_04.jpg';
// 小图
// const EnterPalace = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2kP27X26H8KJjSspmXXb2WXXa-3355153118.png';
// const ImgResult = 'https://img.alicdn.com/imgextra/i1/3355153118/TB2ozsEXxk98KJjSZFoXXXS6pXa-3355153118.png';
// const title = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2BTf7XZjI8KJjSsppXXXbyVXa-3355153118.png';
// const titleNight = 'https://img.alicdn.com/imgextra/i2/3355153118/TB2uJ_6XZrI8KJjy0FhXXbfnpXa-3355153118.png';

const night1 = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2o6cpagnD8KJjy1XdXXaZsVXa-3355153118.jpg';
const night2 = 'https://img.alicdn.com/imgextra/i2/3355153118/TB2DqQsahTI8KJjSspiXXbM4FXa-3355153118.jpg';
const night3 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2z5Esaf2H8KJjy0FcXXaDlFXa-3355153118.jpg';
const night4 = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2_QZAajnD8KJjSspbXXbbEXXa-3355153118.jpg';
const night5 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2EzktacLJ8KJjy0FnXXcFDpXa-3355153118.jpg';
const night6 = 'https://img.alicdn.com/imgextra/i1/3355153118/TB2pyooahPI8KJjSspfXXcCFXXa-3355153118.jpg';
const night7 = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2luMmanTI8KJjSsphXXcFppXa-3355153118.jpg';
const night8 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2w0PJXGLN8KJjSZFvXXXW8VXa-3355153118.jpg';
// const night9 = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2qTouagLD8KJjSszeXXaGRpXa-3355153118.jpg';


const EnterPalace = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2R3uuaf2H8KJjy0FcXXaDlFXa-3355153118.png';
const ImgResult = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2ZXiratrJ8KJjSspaXXXuKpXa-3355153118.png';
const title = 'https://img.alicdn.com/imgextra/i4/3355153118/TB2vuyCajnD8KJjSspbXXbbEXXa-3355153118.png';
const titleNight = 'https://img.alicdn.com/imgextra/i3/3355153118/TB2HSuEXKLM8KJjSZFqXXa7.FXa-3355153118.png';
// import title from 'assets/img/title.png';
// import ImgResult from 'assets/img/result.png';
// import titleNight from 'assets/img/title-light.png';
import kai from 'assets/img/kai.png';
import guan from 'assets/img/guan.png';
import toShare from 'assets/img/toShare.png';
import toStore from 'assets/img/toStore.png';
import Back from 'components/back';
// import ImgRow from 'assets/img/row.png';
import SingleFloor from './single';
import Datas from './datas';
// import Lamplight from 'components/lamplight';

// import {toJS} from 'mobx';

@inject('store')
@observer
export default class Teams extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      palace: Data[props.match.params.palaceId],
      message: [],
      clickClose: true,
      isFixed: false,
      palaceType: 0,
      num: 0,
      openWord: false,
      items: {},
    };

  }

  changeStatus() {
    this.props.store.light();

  }

  changeImg() {
    let { isLight } = this.props.store;

    if (isLight === 'true') {
      return (
        <div className={css.bg}>
          {
            [day1, day2, day3, day4, day5, day6, day7, day8].map( (item, ind) => {
              return <img src={item} key={ind}/>;
            })
          }
        </div>
      );
    } else if (isLight === 'false') {
      return (
        <div className={css.bg}>
          {
            [night1, night2, night3, night4, night5, night6, night7, night8].map((item, ind) => {
              // console.log(item);
              return <img src={item} />;
            })
          }
          {
            //
            // <Lamplight/>
            // <Lamplight/>
            // <Lamplight/>
            // <Lamplight/>
          }
        </div>
      );
    }
  }


  // renderCell(palace, index) {
  //   const props = {
  //     className: css.palace,
  //     to: `/inner/${index}`,
  //     key: index,
  //   };
  //   this.props.store.numChoose(index);
  //   return (
  //     <div>
  //       <div onClick={() => {this.setState({ openWord: true });
  //       }}>111</div>
  //       <Link {...props} onClick={() => {this.props.store.setPalaceFloor(index)}} />
  //     </div>
  //
  //   );
  // }

  // openWord() {
  //
  //   console.log('this.state.openWord', this.state.openWord);
  //   this.setState({ openWord: true });
  // }
  // closeWord() {
  //   console.log('this.state.openWord', this.state.openWord);
  //   this.setState({ openWord: false });
  // }
  //
  // renderCell(palace, index) {
  //   const props = {
  //     className: css.palace,
  //     // to: `/inner/${index}`,
  //     key: index,
  //   };
  //   // this.props.store.numChoose(index);
  //   return (
  //     <div {...props}>
  //       { this.state.openWord &&
  //       <div>
  //         <div onClick={this.closeWord.bind(this)}>关闭</div>
  //         <p>故宫双十一</p>
  //         <span className={css.enter}>点击进入宫殿抢红包<Link to={`/inner/${index}`}/></span>
  //       </div> }
  //       <div onClick={this.openWord.bind(this)}>我是宫殿的头头</div>
  //
  //     </div>
  //
  //   );
  // }

  renderTitle(item, index) {
    // console.log('item', item);
    const props = {
      his: this.props.history,
      item: item,
      ind: index,
      type: [1, 4].indexOf(index) > -1,
      isLight: this.props.store.isLight,
      number: this.state.num,
      setFloor: (ind) => { this.props.store.setPalaceFloor(ind); }
    };
    return (
      <SingleFloor {...props}/>

    );
  }

  // 第三种方案
  // renderTitle(item, index) {
  //   // console.log('item', item);
  //   // const props = {
  //   //   his: this.props.history,
  //   //   item: item,
  //   //   ind: index,
  //   //   isLight: this.props.store.isLight,
  //   //   number: this.state.num,
  //   // };
  //
  //   const props = {
  //     className: css.palace,
  //     style: {
  //       position: 'absolute',
  //       left: item.x,
  //       top: `${item.y}rem`,
  //       // opacity: this.state.opa,
  //     }
  //   };
  //
  //   const headProps = {
  //     src: item.header,
  //     className: css.header,
  //     style: {
  //
  //       // width: w,
  //       // height: h,
  //     }
  //   };
  //   const jianProps = {
  //     // src: isLight == 'true' ? imgDay : imgNight,
  //     src: ImgRow,
  //     className: css.jiantou,
  //     style: {
  //       left: item.ml,
  //       top: item.mt,
  //       transform: `rotate(${item.rot}deg)`,
  //     }
  //   };
  //   return (
  //     <div {...props}>
  //       <img onClick={this.openWord.bind(this)} {...headProps}/>
  //       <img {...jianProps} />
  //     </div>
  //   );
  // }
  //
  // renderBox(item, index) {
  //   const props = {
  //     his: this.props.history,
  //     item: item,
  //     ind: index,
  //     isLight: this.props.store.isLight,
  //     number: this.state.num,
  //     openWord: this.state.openWord,
  //     closeW: this.closeWord.bind(this),
  //   };
  //   return (
  //     <SingleFloor {...props}/>
  //   );
  // }
  //
  // openWord() {
  //
  //   console.log('this.state.openWord', this.state.openWord);
  //   this.setState({ openWord: true });
  // }
  // closeWord() {
  //
  //   console.log('this.state.openWord', this.state.openWord);
  //   this.setState({ openWord: false });
  // }

  // 第二种方案
  // renderBox() {
  //
  //   const imgProps = {
  //     className: css.titleImg,
  //     style: {
  //       // left: yl,
  //       // top: yt,
  //
  //     }
  //   };
  //
  //   return (
  //     <div ref="zh" >
  //       { this.state.openWord &&
  //       <div {...imgProps} >
  //         <img src={title}/>
  //         <div onClick={this.closeWord.bind(this)}/>
  //         <span className={css.enter} onClick={() => {
  //           this.props.history.push(`/inner/${k}`);
  //         }} />
  //       </div> }
  //     </div>
  //   );
  //
  // }


  enter() {

    let k = Math.floor(Math.random() * 6);
    this.props.history.push( `/inner/${k}`);
  }

  close() {
    this.setState({
      clickClose: !this.state.clickClose,
    });
  }

  openMessage() {
    const { mess = [] } = this.props.store;
    // console.log('messageList====123123==', mess);

    let content = '';
    let times = '';
    let id = '';
    let items = '';
    mess.forEach( (item, index) => {
      // console.log('item', item);
      items = item;
      content = items.m_content;

    });
    // let sui = Math.random() * items.length;
    id = items.m_id;
    // content = items.m_content;
    // times = item.m_time;

    // console.log('time', time);
    const { message } = this.props.store;
    this.props.store.messageChange('true');
    // if (message === 'true') {
    return (<div className={css.messageBox}>
      <span>{content}</span>
      {/*<span>{times}</span>*/}
      {/*<span>{id}</span>*/}
    </div>);
    // }

  }

  // renderShow() {
  //
  //   // console.log('num', num);
  //   const { isLight } = this.props.store;
  //   const { num } = this.state;
  //   return <QIpao night={isLight} number={num} />;
  //
  // }
  // 图片预加载
  // preLoader() {
  //   let newImages = [];
  //   for (let i = 0; i < Img.length; i++) {
  //     newImages[i] = new Image();
  //     newImages[i].src = Img[i];
  //   }
  // }

  componentDidMount() {
    // window.addEventListener('scroll', this.onScrollHandle.bind(this));
    // let { setScrollY } = this.props.store;

    // 顶部消息加载
    // const { mess = [] } = this.props.store;
    // console.log('messageList====123123==', mess);
    // this.message = mess;
    //
    // // let ma = Math.floor(Math.random() * mess.length);
    // // this.message = mess[ma];
    // console.log('item', this.message);
    // this.message.map( (item, index) => {
    //   console.log('item', item);
    // } );

    // this.refs.ques.addEventListener('touchmove', function(e) {
    //   // alert(window.scrollY);
    //   console.log(123123);
    //   e.preventDefault();
    //   e.stopPropagation();
    //   removeEventListener('touchmove', function() {
    //     // alert(123);
    //     console.log(456456);
    //   }, false);
    // }, false);

    // this.preLoader();

    window.onscroll = () => {
      // console.info(window.scrollY);
      let { scrollY } = window;
      this.props.store.setScrollY(window.scrollY);
      if (scrollY > 150) {
        this.setState({
          isFixed: true,
        });
        this.props.store.setOpa(1);
      } else {
        this.setState({
          isFixed: false
        });
        this.props.store.setOpa(1);
      }

      // console.log('this.state.palaceType', this.state.palaceType);
      // ;

      // if(scrollY < 500 && this.state.palaceType !== 0) {
      //   this.setState({
      //     palaceType: 0
      //   });
      // } else if(scrollY < 900 && scrollY > 500 && this.state.palaceType !== 1) {
      //   this.setState({
      //     palaceType: 1
      //   });
      //   message.info('武英殿：皇家出版社!')
      // } else if(scrollY < 2000 && scrollY > 900 && this.state.palaceType !== 2) {
      //   this.setState({
      //     palaceType: 2
      //   });
      //   message.info('太和殿：走到金銮殿前，不进去看看吗？')
      // } else if(scrollY < 2400 && scrollY > 2000 && this.state.palaceType !== 3) {
      //   this.setState({
      //     palaceType: 3
      //   });
      //   message.info('撷芳殿：想看清代皇子的“宿舍”吗?')
      // } else if(scrollY < 3000 && scrollY > 2400 && this.state.palaceType !== 4) {
      //   this.setState({
      //     palaceType: 4
      //   });
      //   message.info('养心殿：士希贤、贤希圣、圣希天。想看看乾隆皇帝的三希堂吗？进来一探究竟吧')
      // } else if(scrollY < 3600 && scrollY > 3000 && this.state.palaceType !== 5) {
      //   this.setState({
      //     palaceType: 5
      //   });
      //   message.info('乾清宫：你知道乾清宫有27张床吗？')
      // } else if(scrollY > 3600 && this.state.palaceType !== 6) {
      //   this.setState({
      //     palaceType: 6
      //   });
      //   message.info('坤宁宫：坤宁宫内迎皇后')
      // }

      // if (scrollY < 800) {
      //   this.setState({
      //     num: 0,
      //   });
      // } else if (scrollY < 1300 ) {
      //   this.setState({
      //     num: 1,
      //   });
      // } else if (scrollY < 1700 && scrollY > 1300) {
      //   this.setState({
      //     num: 2,
      //   });
      //
      // } else if (scrollY < 2300 && scrollY > 1700) {
      //   this.setState({
      //     num: 0,
      //   });
      //
      // } else if (scrollY < 2720 && scrollY > 2300 ) {
      //   this.setState({
      //     num: 3,
      //   });
      // } else if (scrollY < 3200 && scrollY > 2720) {
      //   this.setState({
      //     num: 4,
      //   });
      //   // return this.renderShow(4);
      // } else if (scrollY < 3800 && scrollY > 3200) {
      //   this.setState({
      //     num: 5,
      //   });
      //   // return this.renderShow(5);
      // } else if (scrollY < 4300 && scrollY > 3800) {
      //   this.setState({
      //     num: 6,
      //   });
      //   // return this.renderShow(6);
      // } else if (scrollY > 4300) {
      //   this.setState({
      //     num: 0,
      //   });
      // }
    };

    const { palaceFloor } = this.props.store;
    // window.location.hash = `#${palaceFloor}`;
    // // alert(palaceFloor);
    //
    // let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    switch (palaceFloor) {
      case 0: document.documentElement.scrollTop = document.body.scrollTop = 1000;break;
      case 1: document.documentElement.scrollTop = document.body.scrollTop = 1273;break;
      case 2: document.documentElement.scrollTop = document.body.scrollTop = 2422;break;
      case 3: document.documentElement.scrollTop = document.body.scrollTop = 2744;break;
      case 4: document.documentElement.scrollTop = document.body.scrollTop = 3432;break;
      case 5: document.documentElement.scrollTop = document.body.scrollTop = 4071;break;
    }
  }

  // componentWillUnmount() {
  //   window.removeEventListener('scroll', this.onScrollHandle.bind(this));
  // }

  quesClick() {
    this.props.store.quesSet(true);
  }
  ques() {
    const {quesClick} = this.props.store;
    const props = {
      className: css.ques,
      onClick: () => {
        this.props.store.quesSet(false);
      }
    };
    if (quesClick) {
      return (
        <div className={css.quesBox} ref="ques">
          <img src={ImgResult} {...props}/>
        </div>
      );
    }
  }


  toStore() {
    window.location.href = 'https://palacemuseum.m.tmall.com/?shop_id=157260118';
  }
  toShare() {
    Tida.share({
      title: '天猫双11，夜探紫禁城',
      content: '天猫双11，夜探紫禁城！天猫双11，夜探紫禁城！',
      url: '//sxtest.ews.m.jaeapp.com/hd/titatest/index.html',
      image: '//img.alicdn.com/bao/uploaded/i2/TB1Ra9zRpXXXXaYaXXXXXXXXXXX_!!0-item_pic.jpg',
      // 'targets': [0, 1, 2, 3, 4, 5, 6, 7],
      // 'weixinAppId': '',
      // 'weixinMsgType': 'image',
      // 'isAliUrl': true
    }, function(data) {
      console.log('share', data);
    });
  }


  render() {


    // console.log('this.props.store.scrollY', this.props.store.scrollY);

    const { clickClose, isFixed, openWord } = this.state;
    const { endTime, isLight, testTime, opa, musicPlay } = this.props.store;
    const props = {
      opa: opa,
      isMusic: musicPlay,
      quesClick: this.quesClick.bind(this),
      // musicClick: this.musicClick.bind(this),
    };
    const lightProps = {
      onClick: this.changeStatus.bind(this),
      className: css.light,
      style: isFixed ? {
        position: 'fixed',
        top: '20px',
      } : {
        position: 'absolute',
        top: '180px',
      }
    };
    return (
      <div className={css.wrapper}>

        {isLight === 'true' ? <img src={kai} {...lightProps}/> : <img src={guan} {...lightProps}/> }
        {this.changeImg()}
        {/* { Data.map((palace, index) => this.renderCell(palace, index)) } */}
        {/* { openWord && this.renderBox() } */}
        <div className={css.titleWrapper}>{ Datas.map((item, index) => this.renderTitle(item, index)) }</div>

        {/* { Datas.map((item, index) => this.renderBox(item, index)) } */}
        <Back shouye={true}/>
        <img src={isLight === 'true' ? title : titleNight} className={css.titleHead} />
        { endTime && clickClose &&
          <div className={css.imgNow}>
            <img src={EnterPalace} onClick={this.enter.bind(this)} className={css.imgNow}/>
            <div onClick={this.close.bind(this)}></div>
          </div>
        }
        { testTime && this.openMessage() }
        <TopBar {...props}/>
        {this.ques()}
        <div className={css.bottom}>
          <img src={toStore} onClick={this.toStore.bind(this)}/>
          <img src={toShare} onClick={this.toShare.bind(this)}/>
        </div>
        <div className={css.copyright}>
          <p>背景音乐琵琶演奏及版权提供者：赵聪</p>
        </div>
      </div>
    );
  }
}
